<template>
    <div class="hot-collect">
        <i class="el-icon-star-on" style="color: #0084ff;font-size: 34px"></i>
        <i style="font-size: 25px;color: #121212;padding-left: 12px;font-weight: 600;">热门收藏夹</i>
<!--1-->
        <el-row>
<!-- 左-->
            <el-col :span="12">
                <div class="collect-item" >
                    <div style="margin: 15px">
                    <el-row class="collect-title">
                        <el-col :span="16"><div class="collect-head">
                            <p class="head-title">留着慢慢看</p>
                            <p style="font-size: 15px">面壁者 创建 2,128 人关注</p>
                        </div></el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                            <button  class="collect-btn" id="bn1" @click="handleBn1">关注收藏夹</button>
<!--                                <button id="btn1" class="collect-btn" @click="handleBtn1(this)">关注圆桌</button>-->
                            </div>
                        </el-col>
                    </el-row>
                    <div class="item-col">
                        <div class="collect-destil">
                            <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/387000968/answer/1574293735" target="_blank">马云讲的哪些话让你听了非常反感？</a>
                        </div>
                        <div class="collect-des">
                            <span class="des-sp">踩高跷的短腿威：一言概之：偷袭56岁老人家！跟资本讲啥武德！这不是你用花呗与否的事情，我们早已是一根绳上的蚂蚱了。没有针对谁的意思，我就是想搞你蚂蚁金服！ 10月，蚂蚁金服宣布将于11月上市，募资或达300亿美元； 10月24日，第二届外滩金融峰会在上海举行，蚂云在演讲中力怼银行老旧、金融监管束缚创新； 11月2日，中国人民银行、中国银保监会、中国证监会、国家外汇管理局联合约谈蚂蚁金服董事长井贤栋和实际控制人蚂云； 10月3日，蚂蚁…</span>
                        </div>
                        <div style="font-size: 12px;padding: 5px 0">
                            <i style="background-color: lightgrey;padding:3px">回答</i>  1,893 赞同 132 评论
                        </div>
                    </div>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/430504300/answer/1578697168" target="_blank">如何看待网友发帖「放弃腾讯75w年薪去老家做公务员，提离职leader说将来你孩子还得走一遍你的路」？</a>
                            </div>
                            <div class="collect-des"><span>“孩子还得走一遍你的路”，是指他的孩子将来也会做出“放弃腾讯75w年薪。去老家做公务员。”的正确选择吗？来leader慧眼如炬啊，知道还是公务员好。</span>
                            </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i>  1,165 赞同 50 评论
                            </div>
                        </div>
                        <div class="col-a" ><a href="https://www.zhihu.com/collection/95801885" target="_blank" style="color: #8590a6;">已收藏 7500 条内容</a> <i class="el-icon-arrow-right" style="color:#8590a6; "></i> </div>
                    </div>
                </div>
            </el-col>
<!--右-->
            <el-col :span="12">
                <div class="collect-item" >
                    <div style="margin: 15px">
                        <el-row class="collect-title">
                            <el-col :span="16"><div class="collect-head">
                                <p class="head-title">好好看看这个世界</p>
                                <p style="font-size: 15px">提姆葉yezhongli 创建 2,687 人关注
                                </p>
                            </div></el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <button  class="collect-btn" id="bn2" @click="handleBn2">关注收藏夹</button>
<!--                                    <button id="btn2" class="collect-btn" @click="handleBtn1(this)">关注圆桌</button>-->
                                </div>
                            </el-col>
                        </el-row>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/377523459/answer/1069069116" target="_blank">美国等国家为什么对新冠肺炎的防护如此松懈？</a>
                            </div>
                            <div class="collect-des">
                                <span class="des-sp">屁似乎很多国家对于疫情的防控都没有像中国的力度那么大，是因为对新冠肺炎了解不够还是因为其他？</span>
                            </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i>  37 赞同 252 评论
                            </div>
                        </div>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/355886047/answer/1145005298" target="_blank">女孩子发自拍的时候该怎么夸？</a>
                            </div>
                            <div class="collect-des">
                                <span class="des-sp">——你让我深深地了解了一笑倾城这句话的意义，在看完照片后，我不敢轻易回复，我担心我庸俗不堪的语言会玷污了这世间少有的美感。但我还是回复了，觉得如果不能在如此精彩的照片后面留下自己的伏笔，那将会成为我一生的遗憾。请原谅我的自私!无论用多么华丽的言语修饰都已无法形容这张照片的美感，太美了</span>
                            </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i>  1,893 赞同 132 评论
                            </div>
                        </div>
                        <div class="col-a" ><a href="https://www.zhihu.com/collection/58189249" target="_blank" style="color: #8590a6;">已收藏 2,545 条内容</a> <i class="el-icon-arrow-right" style="color:#8590a6; "></i> </div>
                    </div>
                </div>
            </el-col>
        </el-row>
<!--        2-->
        <el-row>
            <!-- 左-->
            <el-col :span="12">
                <div class="collect-item" >
                    <div style="margin: 15px">
                        <el-row class="collect-title">
                            <el-col :span="16"><div class="collect-head">
                                <p class="head-title">有趣感动/惊为天人</p>
                                <p style="font-size: 15px">我是一只小狐狸 创建 1,351 人关注</p>
                            </div></el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <button  class="collect-btn" id="bn3" @click="handleBn3">关注收藏夹</button>
                                    <!--                                <button id="btn1" class="collect-btn" @click="handleBtn1(this)">关注圆桌</button>-->
                                </div>
                            </el-col>
                        </el-row>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/307600626/answer/1529538949" target="_blank">为什么男生不要轻易对女生说晚安？</a>
                            </div>
                            <div class="collect-des">
                                <span class="des-sp">“晚安！”这句话出自鲁迅文集。“晚安”中“晚”字点明了时间，令人联想到天色已黑，象征着当时社会的黑暗。而在这黑暗的天空下人们却感到“安”，侧面反映了人民的麻木，而句末的感叹号体现了鲁迅对人民麻木的“哀其不幸怒其不争”。</span>
                        </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i>  1,415 赞同 616 评论
                            </div>
                        </div>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/428454477/answer/1567070751" target="_blank">如何看待我的研究生辅导员明令禁止未婚学生在硕士三年期间发生性关系?</a>
                            </div>
                            <div class="collect-des">
                                <span class="des-sp">研究生第一次年级大会上，辅导员义正辞严警告全体研究生（未婚）不允许在求学期间发生性关系，一旦被发现有外出开房的情况，辅导员会立刻叫家长来解决问题。请问大家怎么看？首先感谢迄今为止所有在这里回答问题的大家，初衷真的是听完辅导员这番话后三观炸裂，忍住录视频的冲动只发了个问题上来听听知乎网友的看法，替我骂出口或是其他角度的体谅理解我都期待。我在最初的几十条回答下面有针对性的回应一些质疑，现在直接在问题里补充说明一下好了，以备后人参考。首先是关于钓鱼这件事，当时我只考虑了学校的负面影响和我个人的隐私保护，忽视了事实依据给大家带来了困扰，实在抱歉，不想给自己和学校找麻烦的心理希望大家能理解。为了增加真实性这里只增添一点细节，当天会议流程是先填写了两份心理调查问卷，然后导员PPT展示了奖助学金政策和往年毕业生就业情况，另外有提醒同学们谨防电信诈骗，还展示了她个人的履历以举例说明求职时如何进行自我介绍，最后就是单独强调了题中一事。学校信息就别再追问了，我不认为导员的言论需要上升到学校层面，如有学院同学也希望不要冲动发言，再为学校带来不必要的争议。</span>
                            </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i>  5,214 赞同 252评论
                            </div>
                        </div>
                        <div class="col-a" ><a href="https://www.zhihu.com/collection/82408305" target="_blank" style="color: #8590a6;">已收藏 3,787 条内容</a> <i class="el-icon-arrow-right" style="color:#8590a6; "></i> </div>
                    </div>
                </div>
            </el-col>
            <!--右-->
            <el-col :span="12">
                <div class="collect-item" >
                    <div style="margin: 15px">
                        <el-row class="collect-title">
                            <el-col :span="16"><div class="collect-head">
                                <p class="head-title">不一样的人生</p>
                                <p style="font-size: 15px">我是一只小狐狸 创建 2,687 人关注</p>
                            </div></el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <button  class="collect-btn" id="bn4" @click="handleBn4">关注收藏夹</button>
                                    <!--                                    <button id="btn2" class="collect-btn" @click="handleBtn1(this)">关注圆桌</button>-->
                                </div>
                            </el-col>
                        </el-row>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://www.zhihu.com/question/430164599/answer/1579587276" target="_blank">男朋友给我的备注是《英雄联盟》里的角色「诺克萨斯之手」是什么意思？</a>
                            </div>
                            <div class="collect-des">
                                <span class="des-sp">诺克萨斯之手的特点是，血怒一有，智商归零，六亲不认。你可以思考一下是不是每个月血怒的时候太暴躁了</span>
                            </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i>  13,379 赞同 423 评论
                            </div>
                        </div>
                        <div class="item-col">
                            <div class="collect-destil">
                                <a style="color: inherit;text-decoration: none;" href="https://zhuanlan.zhihu.com/p/149622825" target="_blank">使用 Illustrator 及 Grasshopper 的（半）自动填色法</a>
                            </div>
                            <div class="collect-des">
                                <span class="des-sp">Linkzero Tsang：undefined</span>
                            </div>
                            <div style="font-size: 12px;padding: 5px 0">
                                <i style="background-color: lightgrey;padding:3px">回答</i> 14,301 赞同 161 评论
                            </div>
                        </div>
                        <div class="col-a" ><a href="https://www.zhihu.com/collection/119363342" target="_blank" style="color: #8590a6;">已收藏 2,854 条内容</a> <i class="el-icon-arrow-right" style="color:#8590a6; "></i> </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <div style="text-align: center;padding: 10px 14px 0 24px;">
            <a href="https://www.zhihu.com/collection/hot" target="_blank" class="more">查看更多收藏夹  <i style="font-weight: bold" class="el-icon-arrow-right"></i> </a>
        </div>

        </div>

</template>

<script>
    export default {
        name: "HotCollect",
        methods:{
            handleBn1(){
                var bn1=document.getElementById("bn1");
                // console.log('55')
                if (bn1.innerHTML=="关注收藏夹"){
                    bn1.innerHTML="已关注"
                    bn1.style.color="gray";
                }else if (bn1.innerHTML =="已关注"){
                    bn1.innerHTML="关注收藏夹"
                    bn1.style.color="#0084ff";
                }
            },
            handleBn2(){
                var bn1=document.getElementById("bn2");
                // console.log('55')
                if (bn1.innerHTML=="关注收藏夹"){
                    bn1.innerHTML="已关注"
                    bn1.style.color="gray";
                }else if (bn2.innerHTML =="已关注"){
                    bn1.innerHTML="关注收藏夹"
                    bn1.style.color="#0084ff";
                }
            },
            handleBn3(){
                var bn1=document.getElementById("bn3");
                // console.log('55')
                if (bn1.innerHTML=="关注收藏夹"){
                    bn1.innerHTML="已关注"
                    bn1.style.color="gray";
                }else if (bn1.innerHTML =="已关注"){
                    bn1.innerHTML="关注收藏夹"
                    bn1.style.color="#0084ff";
                }
            },
            handleBn4(){
                var bn1=document.getElementById("bn4");
                // console.log('55')
                if (bn1.innerHTML=="关注收藏夹"){
                    bn1.innerHTML="已关注"
                    bn1.style.color="gray";
                }else if (bn4.innerHTML =="已关注"){
                    bn1.innerHTML="关注收藏夹"
                    bn1.style.color="#0084ff";
                }
            },

        }
    }
</script>

<style scoped>
    .collect-item{
        width: 490px;
        height: 360px;
        /*border: #999999 1px solid;*/
        background-color: white;
        margin: 20px 10px;

        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    .collect-title{
        /*margin: 0 24px;*/
        padding: 20px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 112px;
        border-bottom: 1px solid #ebebeb;
    }
    .collect-head p{
        line-height: 20px;
        padding-top: 10px;
    }
    .head-title{
        font-size: 20px;
        color: #121212;
        font-weight: bold;
    }
    .collect-btn{
        border: none;
        height: 34px;
        width: 88px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        outline: none;
        cursor: pointer;
        background-color: #EBF5FF;
        color: #0084ff
    }
    .collect-destil{
        display: block;
        height: 21px;
        line-height: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        /*margin-left: 15px;*/
    }
    .collect-destil a{

    }

    .collect-des{
        display: block;
        height: 21px;
        line-height: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        padding: 10px 0;

    }
    .des-sp{
        margin-top: 4px;
        height: 21px;
        line-height: 21px;
        color: #444;
        font-size: 15px;
        font-weight: initial;
    }
    .item-col {
        line-height: 20px;
        padding: 10px;
    }
    .col-a{
        align-items: center;
        margin:5px;
        height: 24px;
        font-size: 14px;
        color: #8590a6;
        font-weight: bold;
    }
    .more{
        /*background-color: white;*/
        border-radius: 25px;
        color: #8590a6;
        font-size: 18px;
        font-weight: bold;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 5px 14px 5px 24px;
        height: 48px;
        margin-top: 25px;
        background-color: #fff;
        text-decoration: none;

    }

</style>